<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="6" :sm="24">
              <a-form-item label="分类名称">
                <a-input allowClear placeholder="分类名称" v-model="queryParam.name"></a-input>
              </a-form-item>
            </a-col>

            <a-col :md="8" :sm="24">
              <a-form-item label="起止时间">
                <a-range-picker v-model="queryParam.dateTime" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-form-item label="">
                <a-button type="primary" @click="onSearch(true)">查询</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>

    <a-card :border="false">
      <div class="table-operator" style="display: flex; justify-content: space-between">
        <a-radio-group v-model="queryParam.state" @change="onSearch(true)">
          <a-radio-button :value="-1"> 全部 </a-radio-button>
          <a-radio-button :value="1"> 使用中 </a-radio-button>
          <a-radio-button :value="0"> 已禁用 </a-radio-button>
        </a-radio-group>

        <div>
          <a-button type="primary" icon="plus" @click="showModal()">添加</a-button>
          <a-dropdown>
            <a-menu slot="overlay">
              <a-menu-item @click="handleAll(selectedRows, 0)">批量禁用</a-menu-item>
              <a-menu-item @click="handleAll(selectedRows, 1)">批量开启</a-menu-item>
            </a-menu>
            <a-button> 批量操作 </a-button>
          </a-dropdown>
        </div>
      </div>

      <STable
        ref="table"
        size="default"
        :columns="columns"
        :data="loadData"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      >
        <span slot="state" slot-scope="state">
          <a-badge v-if="state == 1" status="success" text="已启用"></a-badge>
          <a-badge v-else status="default" text="已禁用"></a-badge>
        </span>
        <span slot="operation" slot-scope="item, key">
          <a-space>
            <a-button @click="showModal(key)" type="link">编辑</a-button>
            <a-dropdown>
              <a class="ant-dropdown-link" @click="(e) => e.preventDefault()"> 更多<a-icon type="down" /> </a>
              <a-menu slot="overlay">
                <a-menu-item @click="handleAll([key], 0)">
                  <a href="javascript:;">禁用</a>
                </a-menu-item>
                <a-menu-item @click="handleAll([key], 1)">
                  <a href="javascript:;">开启</a>
                </a-menu-item>
                <a-menu-item @click="handleAll([key], 2)">
                  <a href="javascript:;">删除</a>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </a-space>
        </span>
      </STable>

      <a-modal
        width="500px"
        :title="checkItem.id ? '编辑分类' : '新增分类'"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="visible = false"
      >
        <a-form-model :model="checkItem" :rules="rules" :labelCol="{ span: 6 }" :wrapperCol="{ span: 17 }" ref="form">
          <a-form-model-item label="分类名称" prop="name">
            <a-input allowClear placeholder="分类名称" v-model="checkItem.name"></a-input>
          </a-form-model-item>
          <a-form-model-item label="分类排序" prop="sort">
            <a-input-number :min="0" :precision="0" placeholder="分类排序" v-model="checkItem.sort"></a-input-number>
          </a-form-model-item>
          <a-form-model-item label="是否启用">
            <a-switch v-model="checkItem.state"  />
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import ChartGptApi from '@/api/chartGpt'
import STable from '@/components/Table'

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    width: 60,
  },
  {
    title: '分类名称',
    dataIndex: 'name',
    width: 100,
  },
  {
    title: '分类排序',
    dataIndex: 'sort',
    width: 80,
    sorter: (a, b) => a.sort - b.sort,
  },
  {
    title: '创建时间',
    dataIndex: 'created_at',
    width: 200,
    sorter: (a, b) => Number(new Date(a.created_at)) - Number(new Date(b.created_at)),
  },
  {
    title: '状态',
    dataIndex: 'state',
    filters: [
      {
        text: '使用中',
        value: 1,
      },
      {
        text: '已禁用',
        value: 0,
      },
    ],
    width: 80,
    onFilter: (value, record) => record.state.includes(value),
    scopedSlots: { customRender: 'state' },
  },
  {
    title: '操作',
    dataIndex: 'operation',
    width: 120,
    scopedSlots: { customRender: 'operation' },
  },
]
export default {
  components: {
    STable,
  },
  data() {
    return {
      columns,
      queryParam: {
        name: '',
        state: -1,
        dateTime: [],
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: async (parameter) => {
        console.log(parameter)
        var formData = Object.assign(parameter, this.queryParam)
        const res = await ChartGptApi.catList(formData)
        console.log(res.data, 'loadData1')

        return res.data
      },
      selectedRowKeys: [],
      selectedRows: [],

      visible: false,
      confirmLoading: false,
      checkItem: {
        id: '',
        name: '',
        sort: 1,
        state: 1,
      },
      rules: {
        name: [
          {
            required: true,
            message: '分类名称不能为空',
            trigger: ['blur', 'change'],
          },
        ],
        sort: [
          {
            required: true,
            message: '分类排序不能为空',
            trigger: ['blur', 'change'],
          },
        ],
      },
    }
  },
  created() {},
  methods: {
    onSelectChange(selectedRowKeys, selectedRows) {
      console.log(selectedRowKeys, selectedRows)
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    onSearch(type = false) {
      this.$refs.table.refresh(type)
    },
    showModal(item) {
      if(item) {
        (this.checkItem = JSON.parse(JSON.stringify({...item,state: Number(item.state)})))
      } else {
        this.checkItem = this.$options.data().checkItem
      }
      this.visible = !this.visible
    },
    async handleAll(dataArr, type) {
      console.log(dataArr, type)
      switch (type) {
        case 2:
          await ChartGptApi.catDel({
            id: dataArr[0].id,
          })
          this.onSearch(false)

          break

        default:
          await ChartGptApi.catState({
            id: JSON.stringify(dataArr.map((item) => item.id)),
            state: type,
          })
          this.onSearch(false)
          break
      }
    },
    async handleOk() {
      this.confirmLoading = true
      try {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            const res = await ChartGptApi.catSave({
              ...this.checkItem,
              state: Number(this.checkItem.state)
            })
            this.visible = false
            this.onSearch()
          }
          this.confirmLoading = false
        })
      } catch (error) {
        this.confirmLoading = false
      }
    },
  },
}
</script>

<style></style>
